<h2>@Model.Name</h2>

<h3>Autocomplete</h3>
@if (Model.HasValue("ucAutocomplete"))
{
    var tokenSeperatedList = Model.GetPropertyValue("ucAutocomplete").Split(',');
    <ul>
        @foreach (var item in tokenSeperatedList)
        {
            @* As of 4.7.1 this makes more sense: Library.NodeById(item) *@
            var page = Model.NodeById(item);
            <li><a href="@page.Url">@page.Name</a></li>
        }
    </ul>
}

<h3>Character limit</h3>
@Model.ucCharacterLimit

<h3>Country picker</h3>
@{ var country = Model.ucCountryPicker; }
@* 
    The datatype is configured with "Choose" as the first option,
    so I only output a country name if it's not "Choose".
*@
@(country == "Choose" ? "" : country)

<h3>Dropdown checklist</h3>
@RenderTokenSeperatedList(Model.GetPropertyValue("ucDropdownCheckList"), ',')

@* Taken from NativeDataTypes.cshtml *@
@helper RenderTokenSeperatedList(dynamic values, char token)
{
    if (values == string.Empty)
    {
        @* There are no values! Carry on.. *@
        return;
    }
    var tokenSeperatedList = values.Split(token);
    <ul>
        @foreach (var item in tokenSeperatedList)
        {
            <li>@item</li>
        }
    </ul>
}

<h3>Elastic textbox</h3>
@Model.ucElasticTextbox

<h3>File Picker</h3>
@Model.ucFilePicker

<h3>Image dropdown list</h3>
@* Note: The image is only visible in the backoffice and can't be shown here *@
@Model.ucImageDropdownList

<h3>Incremental textbox</h3>
@if (Model.ucIncrementalTextbox != 0)
{
    @Model.ucIncrementalTextbox
}

<h3>JSON Datasource Drop Down</h3>
@if (Model.HasValue("ucJsonDatasource")) 
{
    var jsonData = Model.ucJsonDatasource.Split('|');
    <text>Id:</text> @jsonData[0] <br />
    <text>Value:</text> @jsonData[1]
}

<h3>Multi-Node Tree Picker</h3>
@if (Model.HasProperty("ucMultiNodeTreePicker") && Model.HasValue("ucMultiNodeTreePicker") && Model.ucMultiNodeTreePicker.Count() != 0 && CheckIfAnyNodesInListArePublished(Model.ucMultiNodeTreePicker))
{
    <ul>
    @foreach (var nodeId in Model.ucMultiNodeTreePicker)
    {
        @* The nodeId is an XML node of which we need to get the text to get the real ID *@
        var contentItem = Model.NodeById(nodeId.InnerText);
        <li>@contentItem.Name</li>
    }
    </ul>
}

@functions {
    private bool CheckIfAnyNodesInListArePublished(dynamic MultiNodePicker) {
        foreach (var nodeId in MultiNodePicker) {
            var contentItem = Model.NodeById(nodeId.InnerText);
            if (contentItem.Name != string.Empty) {
                return true;
            }
        }
        
        return false;
    }
}

<h3>Muliple Textstring</h3>
@if (Model.HasValue("ucMultipleText") && Model.ucMultipleText.Count() != 0)
{
    <ul>
    @foreach (var value in Model.ucMultipleText) {
        <li>@value.InnerText</li>
    }
    </ul>
}

<h3>Radiobuttonlist With Images</h3>
@* Note: The image is only visible in the backoffice and can't be shown here *@
@Model.ucRadiobuttonlistWithImages


<h3>Related Links With Media</h3>
@* 
    This datatype stores a bit of XML, even if left empty, so it 
    requires a different check to see if something can be rendered.
*@
@if (Model.ucRelatedLinksWithMedia.Count() != 0)
{
    <ul>
        @foreach (var item in Model.ucRelatedLinksWithMedia)
        {
            var target = item.newwindow == "1" ? "target=\"_blank\"" : "";
            <li>
                @* The output is different for media, internal and external links *@
                @{
                    string type = item.type;
                    switch (type)
                    {
                        case "internal":
                            <a href="@Model.NodeById(item.link).Url" @target>@item.title</a>
                            break; 
                        case "media":
                            var mediaItem = Model.MediaById(item.link);
                            if (mediaItem.NodeTypeAlias == "Image")
                            {                                
                                @*
                                    If the type of the mediacropper is not XML (but a string) then there 
                                    are no crops defined, so I should not try to find the crops.
                                *@
                                <span>Original image: <a href="@mediaItem.umbracoFile" @target>@mediaItem.nodeName</a> (@mediaItem.umbracoBytes bytes)</span><br />
                                var crops = mediaItem.mediaCropper;
                                if (crops.GetType().ToString() != "System.String")
                                {
                                    <text>Crops: </text><br />
                                    <img src="@crops.Find("@name", "Thumbnail").url" alt="@mediaItem.nodeName"/><br />
                                    <img src="@crops.Find("@name", "Header").url" alt="@mediaItem.nodeName"/>
                                }
                            }
                            else
                            {
                                //Other unknown types just get a download link
                                <a href="@Model.MediaById(item.link).UmbracoFile" @target>@item.title</a>
                            }
                            break;
                        case "external":
                            <a href="@item.link" @target>@item.title</a>
                            break;
                    }
                }
            </li>
        }
    </ul>
}

<h3>Slider</h3>
@Model.ucSlider

<h3>Text Image</h3>
@if (Model.HasValue("ucTextImage"))
{
    @* Unfortunately the tilde (~) has to be stripped of the image to make it work *@
    <img src="@Model.ucTextImage.Url.Replace("~", "")" alt="@Model.ucTextImage.Text" title="@Model.ucTextImage.Text" />
}

<h3>Togglebox</h3>
@if (Model.HasValue("ucTogglebox")) 
{
    @(Model.GetPropertyValue("ucTogglebox") == "1" ? "True" : "False")
}

<h3>Url Picker</h3>
@if (Model.HasValue("ucUrlPicker")) 
{
    @* Dashes are not allowd in method names, so they are stripped (new-window, link-title) *@
    var target = Model.ucUrlPicker.newwindow == "True" ? "target=\"_blank\"" : "";
    <a href="@Model.ucUrlPicker.url" @target>@Model.ucUrlPicker.linktitle</a>
}

<h3>User Picker</h3>
@* If the user Id equals -1, that means nothing was chosen *@
@if (Model.HasValue("ucUserPicker") && Model.GetPropertyValue("ucUserPicker") != "-1")
{
    var x = new umbraco.BusinessLogic.User(int.Parse(Model.ucUserPicker));
    <text>User name: </text> @x.Name<br />
    <text>User type: </text> @x.UserType.Alias
}

<h3>Xpath Checkboxlist</h3>
@if (Model.HasValue("ucXpathCheckboxlist") && Model.ucXpathCheckboxlist.Count() != 0)
{
    <ul>
    @foreach (var nodeId in Model.ucXpathCheckboxlist)
    {
        var node = Model.NodeById(nodeId.InnerText);
        <li><a href="@node.url">@node.Name</a></li>
    }
    </ul>
}

<h3>Xpath Dropdownlist</h3>
@if (Model.HasValue("ucXpathDropdownlist"))
{
    var node = Model.NodeById(Model.ucXpathDropdownlist);
    <a href="@node.url">@node.Name</a>
}